<template>

<div id="item_5537621" class="two_defaultBlock" >
        <div @click="onParticulars(recom.sku)">
          <div class="lt">
            <img
              :src="recom.picture"
              alt
            />
            <!--  -->
            <span class="choose_color"></span>
          </div>
          <div class="rt">
            <h5>{{recom.name}}</h5>
            <!-- <p class="desc">百搭</p> -->
            <div class="sum">
              <!-- <p class="mp">单买价:<span>49.9</span></p> -->
              <!-- <p class="sp">2人团<em>39.9</em><span class="earn hide"></span></p> -->
              <p class="num">
                已拼
                <span>{{recom.sale_count}}</span>件
              </p>
              <p class="sp">
                <em>{{recom.groupon_price}}</em>
                <span class="earn hide"></span>
              </p>
            </div>
            <!-- <button><span>去开团</span></button> -->
            <!-- <button>去拼团</button> -->
          </div>
        </div>
      </div>

 
</template>

<script>

export default {
  props:{
    recom:Object
  },
  methods:{
     onParticulars(recom) {
       this.$store.dispatch('productId',recom)
       console.log();
      // this.$router.push({ path:/Particulars/  });
      this.$router.push({
        name: 'Particulars',
        query: {
        productId: `${recom}`
        }
      })
    }
  }
};
</script>

<style lang="stylus" scoped>
      .two_defaultBlock {

        border-radius: 0.15rem;
        margin: 0 0 0.03rem 0.02rem;
        overflow: hidden;
        background-color: rgba(247,247,247,0.439);
        width: 49%;

        >a {
          display: block;
        }

        .lt {
          position: relative;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            border-radius: 0.13rem;
            -webkit-border-radius: 0.13rem;
          }

          .choose_color {
            background: #fff;
            position: absolute;
            width: 0.32rem;
            font-size: 0.24rem;
            color: #999;
            border: 1px solid #aaa;
            border-radius: 0.05rem;
            padding: 0.16rem 0;
            text-align: center;
            line-height: 1.4;
            top: 0.9rem;
            left: 0;
            display: none;
          }
        }

        .rt {
          display: flex;
          flex-direction: column;
          min-height: 1.2rem;
          font-size: 0.16rem;
          line-height: 1.25;
          padding: 0.2rem;

          h5 {
            white-space: nowrap;
            text-overflow: ellipsis;
            justify-content: start;
            overflow: hidden;
            margin-bottom: 0.0667rem;
            font-weight: 400;
            font-size: 0.14rem;
            color: #222;
          }

          .sum {
            color: #999;
            display: flex;
            flex-direction: column;
            bottom: 0.1666rem;

            p.num {
              color: #666;
              font-size: 0.1rem;
            }

            .sp {
              font-size: 0.16rem;
              color: #fc285d;
              margin: 0.09rem 0;

              em {
                margin-left: 0.0667rem;
                font-style: normal;
                font-weight: 700;
                font-size: 0.2rem;
              }

              &:before {
                content: '\00A5';
                font-size: 0.16rem;
              }

              .earn {
                color: #d3b33f;
                margin-left: 0.1333rem;
              }
            }
          }
        }
      }
    // }
</style>